<template>
  <div class="con">
    <div class="echarts" id="quality3Echarts"></div>
  </div>
</template>

<script>
export default {
  name:'qualityArea3',
  data() {
    return {
      option: {
        // backgroundColor: "black",

        tooltip: {
          trigger: "axis",

          backgroundColor: "rgba(255,255,255,0.8)",

          extraCssText: "box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)",

          textStyle: {
            color: "#6a717b",
          },
        },

        grid: {
          top: "0.5%",

          left: "3%",

          right: "11%",

          bottom: "2.5%",

          containLabel: true,
        },

        yAxis: [
          {
            type: "category",
           
            data: ["a", "b", "c", "d", "e", "f", "g"],

            inverse: true,

            axisTick: {
              alignWithLabel: true,
            },

            axisLabel: {
              margin: 10,

              textStyle: {
                fontSize: 18,

                color: "white",
              },
            },

            axisLine: {
              lineStyle: {
                color: "#2548ac",
              },
            },
          },
        ],

        xAxis: [
          {
            type: "value",
            show:false,
            axisLine: {
              lineStyle: {
                color: "#192469",
              },
            },

            splitLine: {
              lineStyle: {
                color: "#17367c",
              },
            },
          },
        ],

        series: [
          {
            name: "Top 10",

            type: "bar",

            barWidth: 10,

            data: [882, 747, 743, 713, 638, 526, 482],

            label: {
              normal: {
                show: true,

                position: "right",

                textStyle: {
                  color: "#3f9bf7", //color of value

                  fontSize: 18,
                },
              },
            },

            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0, //右
                  y: 0, //下
                  x2: 1, //左
                  y2: 0, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: "#38fff2", // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "#2378f7", // 70% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#3f9bf7", // 100% 处的颜色
                    },
                  ],
                },

                barBorderRadius: [0, 15, 15, 0],

                shadowColor: "rgba(0,0,0,0.1)",

                shadowBlur: 3,

                shadowOffsetY: 3,
              },
            },
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {
    setTimeout(() => {
      const myChartsPie = this.$echarts.init(
        document.getElementById("quality3Echarts")
      );
      myChartsPie.setOption(this.option);
    }, 500);
  },
};
</script>

<style lang="scss" scoped>
.con {
  .echarts {
    width: 435px;
    height: 235px;
    // background-color: #3f9bf7;
  }
}
</style>